<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="http://124.221.62.120:3000/api/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻后台管理系统</title>

    <link rel="stylesheet" href="./lib/admin.css">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/echarts/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../config.js"></script>

    <style>
        * {
            text-decoration: none !important;
        }

        #show_img {
            width: 500px;
            height: 300px;
            /* background-color: pink; */
        }

        .noneimg {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            background-color: aliceblue;
        }

        .noneimg h1 {
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>

<body>

    <!-- 提示框 -->
    <div id="toast-top" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="http://124.221.62.120:3000/api/uploads/favicon.ico" style="width: 30px;" class="rounded me-2"
                    alt="..." />
                <strong class="me-auto"></strong>
                <small>刚刚</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>

    <div class='dashboard'>
        <div class="dashboard-nav">
            <header><a href="#" class="menu-toggle"><i class="fas fa-bars"></i></a><a href="#" class="brand-logo"><i
                        class="fas fa-anchor"></i> <span id="togbtn">新闻后台</span></a></header>
            <nav class="dashboard-nav-list"><a href="#b_show_data" class="dashboard-nav-item active"><i
                        class="fas fa-home"></i>
                    后台数据展示 </a><a href="#upload_news" class="dashboard-nav-item"><i class="fas fa-tachometer-alt"></i>
                    上传新闻
                </a><a href="#news_list" class="dashboard-nav-item"><i class="fas fa-file-upload"></i> 新闻列表
                </a>

                <a href="#user_list" class="dashboard-nav-item"><i class="fas fa-cogs"></i> 用户列表 </a>
                <!-- <a href="#" class="dashboard-nav-item"><i class="fas fa-user"></i> 评论管理 </a> -->
                <div class="nav-item-divider"></div>
                <a href="#" class="dashboard-nav-item"><i class="fas fa-sign-out-alt"></i> Logout </a>
            </nav>
        </div>
        <div class='dashboard-app' id="b_show_data">
            <header class='dashboard-toolbar'><a href="javascript:;" class="menu-toggle" id="menubtn"><svg
                        class="bi bi-justify" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z" />
                    </svg></a></header>
            <div class='dashboard-content'>
                <div class='container'>
                    <div class='card'>
                        <div class='card-header'>
                            <h1>后台数据展示</h1>
                        </div>
                        <div class='card-body'>
                            <div id="main"></div>

                        </div>
                    </div>
                </div>
            </div>


            <div class='dashboard-content' id="upload_news">
                <div class='container'>
                    <div class='card'>
                        <div class='card-header'>
                            <h1>插入新闻</h1>
                        </div>
                        <div class='card-body'>
                            <!-- 上传新闻 -->
                            <!-- 上传显示的图片 -->
                            <div class="noneimg border figure-img img-fluid rounded">
                                <h1>暂无图片</h1>
                            </div>
                            <div class="text-center" style="display: none">
                                <img src="" class="rounded border" id="show_img" alt="">
                            </div>
                            <!-- 上传图片 -->
                            <div class="mb-3">
                                <label for="formFile" class="form-label">选择需要上传的新闻图片</label>
                                <input class="form-control" type="file" id="iptfile">
                            </div>
                            <!-- 新闻标题 -->
                            <label for="exampleFormControlTextarea1" class="form-label">新闻标题</label>
                            <div class="form-floating">
                                <textarea class="form-control" placeholder="Leave a comment here" id="title"
                                    style="height: 100px"></textarea>
                                <label for="floatingTextarea2">Title</label>
                            </div>

                            <!-- 新闻内容 -->
                            <label for="exampleFormControlTextarea1" class="form-label">新闻内容</label>
                            <div class="form-floating">
                                <textarea class="form-control" placeholder="Leave a comment here" id="text"
                                    style="height: 100px"></textarea>
                                <label for="floatingTextarea2">Text</label>
                            </div>
                            <!-- keyword 单选 -->
                            <label for="exampleFormControlTextarea1" class="form-label">新闻关键词</label>
                            <select class="form-select form-select-l" id="keyword" aria-label=".form-select-sm example">
                                <option selected>KeyWord</option>
                                <option value="军事">军事</option>
                                <option value="娱乐">娱乐</option>
                                <option value="政务">政务</option>
                                <option value="国际">国际</option>
                                <option value="汽车">汽车</option>
                                <option value="科技">科技</option>
                                <option value="体育">体育</option>
                                <option value="财经">财经</option>
                                <option value="健康">健康</option>
                                <option value="房产">房产</option>
                                <option value="教育">教育</option>
                            </select>
                            <button type="button" id="submitnews"
                                style="margin:20px auto; width: 100px; margin-left:2%;"
                                class="btn btn-outline-success">提交</button>

                        </div>
                    </div>
                </div>
            </div>
            <div class='dashboard-content' id="news_list">
                <div class='container'>
                    <div class='card'>
                        <div class='card-header'>
                            <h1>新闻列表 <button class="btn btn-success" id="refresh_news">刷新</button></h1>
                        </div>
                        <div class='card-body'>
                            <table class="table">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col">id</th>
                                        <th scope="col">newsid</th>
                                        <th scope="col">title</th>
                                        <th scope="col">date</th>
                                        <th scope="col">keyword</th>
                                        <th scope="col">imgsrc</th>
                                        <th scope="col">pageViews</th>
                                        <th scope="col">content</th>
                                        <th scope="col">del</th>
                                    </tr>
                                </thead>
                                <tbody id="news_row_tbody">
                                    <tr id="news_row">
                                        <th scope="row">1</th>
                                        <td>暂无内容</td>
                                        <td>暂无内容</td>
                                        <td>暂无内容</td>
                                        <td>暂无内容</td>
                                        <td><button id="news_img_btn" class="btn btn-success">图片</button></td>
                                        <td>暂无内容</td>
                                        <td><button id="news_text_btn" class="btn btn-success">内容</button></td>
                                        <td><button id="news_del_btn" class="btn btn-danger">删除</button></td>
                                    </tr>
                                </tbody>
                            </table>
                            <label class="form-label">选择页数</label>
                            <select id="news_page_select" class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class='dashboard-content' id="user_list">
                <div class='container'>
                    <div class='card'>
                        <div class='card-header'>
                            <h1>用户列表</h1>
                        </div>
                        <div class='card-body'>
                            <table class="table">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col">id</th>
                                        <th scope="col">username</th>
                                        <th scope="col">password</th>
                                        <th scope="col">regTime</th>
                                        <th scope="col">nickname</th>
                                        <th scope="col">email</th>
                                        <th scope="col">regAddress</th>
                                        <th scope="col">del</th>
                                    </tr>
                                </thead>
                                <tbody id="user_row_tbody">
                                    <tr id="user_row">
                                        <th scope="row">id</th>
                                        <td>username</td>
                                        <td>password</td>
                                        <td>regTime</td>
                                        <td>nickname</td>
                                        <td>email</td>
                                        <td>regAddress</td>
                                        <td><button id="user_del_btn" class="btn btn-danger">删除</button></td>
                                    </tr>

                                </tbody>
                            </table>
                            <label class="form-label">选择页数</label>
                            <select id="user_page_select" class="form-control">
                                <option>1</option>

                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        //nav点击哪一个 就添加active类 否者久删除active类
        var dashboard_nav_item = document.querySelectorAll('.dashboard-nav-item');
        for (let i = 0; i < dashboard_nav_item.length; i++) {
            dashboard_nav_item[i].onclick = function () {
                for (var j = 0; j < dashboard_nav_item.length; j++) {
                    dashboard_nav_item[j].classList.remove('active');
                }
                this.classList.add('active');
            }
        }

    </script>
    <script>
        //tip 全局可用tip框
        var toastTrigger = document.getElementById("liveToastBtn");
        var toastLiveExample = document.getElementById("liveToast");
        var toast = new bootstrap.Toast(toastLiveExample);
        var btn_login = document.querySelector(".btn-login");
        var me_uto = document.querySelector(".me-auto");
        var toast_body = document.querySelector(".toast-body");
    </script>
    <!-- 获取新闻内容以及渲染脚本 以及操作 -->
    <script src="./lib/js/render_news.js"></script>
    <!-- 获取用户内容以及渲染脚本 以及操作 -->
    <script src="./lib/js/render_user.js"></script>
    <!-- 当没有图片上传时就显示暂时没有图片的div -->
    <script src="./lib/js/show_none_img.js"></script>
    <!-- 上传图片和新闻 -->
    <script src="./lib/js/upload.js"></script>
    <script>

    </script>
    <script src="./lib/js/admin.js"></script>

</body>

</html>